<template>
  <view search_centre>
    <!-- 头部搜索 -->
    <view class="searchHeard">
      <u-search
        placeholder="输入商品名"
        :action-style="searchCss"
        v-model="params.query"
        @custom="searchClick"
      ></u-search>
    </view>
    <!-- 内容 -->
    <view class="content">
      <navigator
        class="u-m-10"
        v-for="item in searchList"
        :key="item.goods_id"
        :url="'/pages/goods_detail/goods_detail?goods_id=' + item.goods_id"
      >
        <u-row>
          <u-col span="4">
            <view>
              <u-image
                width="191rpx"
                height="191rpx"
                :src="item.goods_big_logo"
              ></u-image>
            </view>
          </u-col>
          <u-col span="8">
            <view style="height: 191rpx" class="textCss">
              <view class="goods-name">{{ item.goods_name }}</view>
              <view class="goods-price">￥{{ item.goods_price }}</view>
            </view>
          </u-col>
        </u-row>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
    data(){
        return{
        params:{
      //关键字
      query: "",
      //页码
      pagenum: 1,
      //页容量
      pagesize: 10,
    },
            searchName:'',
            searchList:[],
            searchCss:{
            backgroundColor:'#ea4350',
            height:'60rpx',
            lineHeight:'60rpx',
            width:'100rpx',
            borderRadius:'8px',
            marginRight:'10rpx'
            }
        }
    },
    onLoad(){
         //总条数
    this.total = 0;
    },
     // 滚动条触底事件
  onReachBottom() {
    if (this.searchList.length >= this.total) {
      // 数据不够  提示用户
      uni.showToast({
        title: "没有更多数据了！",
        icon: "none",
      });
    } else {
      // 数据足够
      // 页码+1
      this.params.pagenum++;
      // 重新渲染
      this.getSearchList();
    }
  },
    methods:{
        async getSearchList(){
       const {goods,total}= await this.$u.get("/goods/search", this.params)
        this.searchList = [...this.searchList,...goods]
        this.total = total;
        },
        // 点击事件
        searchClick(){
          if(!this.params.query){
            uni.showToast({
          title: "请输入商品名称！",
          icon: "none",
          });
          return
          }
          this.searchList=[]
          this.getSearchList()
        }
    }
}
</script>

<style lang="scss">
.goods-price {
  color: $themeColor;
}
.textCss {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
</style>